<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="lib/react.development.js"></script>
	<script src="lib/react-dom.development.js"></script>
	<script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
	// zhangpeiyue
	const root = ReactDOM.createRoot(document.querySelector("#root"));
	// 1- 当数据状态发生更改后render
	// 2- 当父组件中的数据状态发生更改，那么子组件render也会执行（即使子组件没有用到父组件的数据状态）;
	// 3- 当父组件执行render后，子组件会运行哪些钩子函数：
	class App extends React.Component{
		state = {
			num:0
		}
		render(){
			return (
				<div>
					<h3 onClick={()=>{
						this.setState({
							num:this.state.num
						})
					}}>App：{this.state.num}</h3>
					<Child num={this.state.num}/>
				</div>
			)
		}
	}
	class Child extends React.Component{
		// nextProps:可以获取到最新的数据状态
		UNSAFE_componentWillReceiveProps(nextProps){
			// 父组件状态num:0---->1
			// this.props.num:0
			// nextProps.num:1
			console.log("1-componentWillReceiveProps",this.props.num,nextProps.num)
		}
		constructor() {
			super();
		}
		// 必须有要一个返回值，返回值的类型是一个布尔值
		// true 继续执行后续的钩子
		// false 停止
		shouldComponentUpdate(nextProps){
			// 父组件中的状态num:0----->1
			// this.props.num:0
			// nextProps.num:1
			console.log("2-shouldComponentUpdate",this.props.num,nextProps.num);
			if(nextProps.num>5) return false;
			return true;
		}
		UNSAFE_componentWillUpdate(nextProps){
			//  父组件中的状态num:0----->1
			// this.props.num:0
			// nextProps.num:1
			console.log("3-componentWillUpdate",this.props.num,nextProps.num);
		}
		render(){
			console.log("4-Child-render",this.props.num);
			return (
				<div>
					<h3>Child</h3>
					<p>num:{this.props.num}</p>
				</div>
			)
		}
		componentDidUpdate(prevProps){
			//  父组件中的状态num:0----->1
			// this.props.num:1
			// prevProps.num:0
			console.log("5-componentDidMount",this.props.num,prevProps.num);
		}
	}
	root.render(<App/>)
</script>
</html>